<template>
  <div ref="chartRef" style="height: 100%;">

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import webapi from '@/api/webapi.js';
import * as echarts from 'echarts';
import utils from '@/assets/utils.js'
import useWarehouseStore from '@/stores/warehouse.js';
const warehouseStore = useWarehouseStore();

const chartRef = ref(null);

onMounted(() => {
  var myChart = echarts.init(chartRef.value, '');
  var option;

  option = {
    title: {
      text: '库存巷道汇总',
      left: 'center',
      top: 0.5 * utils.fontSizeRem(),
      textStyle: {
        fontSize: utils.fontSizeRem(),
        color: '#ffffff',
      }
    },
   legend: {
      bottom: utils.fontSizeRem(),
      textStyle: {
        fontSize: 9
      },
      itemWidth:14
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLabel: {
        fontSize: utils.fontSizeRem() // 修改为需要的字体大小
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: utils.fontSizeRem() // 修改为需要的字体大小
      }
    },
    series: [],
    grid: {
      left: 3 * utils.fontSizeRem(),
      right: 1 * utils.fontSizeRem(),
      top: 3 * utils.fontSizeRem(),
      bottom: 4.5 * utils.fontSizeRem(),
    },
  };

  myChart.setOption(option);

  setTimeout(() => {
    fetchData(myChart)
  }, 7000);
});


function fetchData(myChart) {
  webapi.post('/storage/lanesummary', { divisioncode: warehouseStore.getWarehouse() }).then((response) => {
    var xAxisData = [];
    var fullcontainerpercentData = [];
    var halfcontainerpercentData = [];
    var emptycontainerpercentData = [];
    var reservepercentData = [];
    response.data.forEach(element => {
      xAxisData.push(element.lanenumber + '#');
      fullcontainerpercentData.push(element.fullcontainerpercent)
      halfcontainerpercentData.push(element.halfcontainerpercent)
      emptycontainerpercentData.push(element.emptycontainerpercent)
      reservepercentData.push(element.reservepercent)
    });


    var seriesData = [
      {
        name: '有货',
        type: 'bar',
        stack: 'total',
        data: fullcontainerpercentData,
        label: {
          show: true,
          formatter: (params) => params.seriesName + '\n' + (params.value * 100).toFixed(2) + '%',
          fontSize: 0.75 * utils.fontSizeRem(),
        },
      },
      {
        name: '空托',
        type: 'bar',
        stack: 'total',
        data: emptycontainerpercentData,
        label: {
          show: true,
          formatter: (params) => params.seriesName + '\n' + (params.value * 100).toFixed(2) + '%',
          fontSize: 0.75 * utils.fontSizeRem(),
        },
      },
      {
        name: '预留库位',
        type: 'bar',
        stack: 'total',
        data: reservepercentData,
        label: {
          show: true,
          formatter: (params) => params.seriesName + '\n' + (params.value * 100).toFixed(2) + '%',
          fontSize: 0.75 * utils.fontSizeRem(),
        },
      },
    ]


    myChart.setOption({
      xAxis: {
        data: xAxisData
      },
      series: seriesData
    })
  });

  setTimeout(() => {
    fetchData(myChart)
  }, 3 * 60 * 60 * 1000);
}
</script>
